<div class="page">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
		var id_now = -1;
		var name_now = "";
        $(document).ready(function(){			
			//alert($("#tes").html());
			$(".inbox").click(function(){
				id_now = $(this).attr('id');
				name_now = $(this).attr('name');
				//alert(id_now);
				loadMessage(id_now);
				$("#nama").html("<h4>" + name_now + "</h4>");
				$("#reply").val("");
				$("#reply-form").show();
			});
			$("#kirim").click(function(){
				//alert($("#reply").val());
				//id_now = $("div[name='inbox']").attr('id');
				//alert($("#reply").val());
				if(id_now == -1){
					//alert($("#senderId").val());
					id_now = $("#senderId").val();
				}
				if ($("#reply").val()!="") {
					sendMessage(id_now, $("#reply").val());
				}
			});
			//("#reply-form").hide();
		});
		function sendMessage(recipient, body) {
			$.ajax({
			   url:"http://localhost/ojexcom/index.php/pesan/send",
			   type:"POST",
			   data:{
				   body:body,
				   recipient:recipient
				   },
			   dataType:"json",
			   beforeSend:function(){
			   },
			   success:function() {
					loadMessage(id_now);
					$("#nama").html($("#nama_inbox").html());
					$("#reply").val("");
					$("#reply-form").show();
			   }
			});			
		}
		function generateThread(data) {
			var ret = "";
			var count = data.length;
			for (var i=0;i<count;i++) {
				var senderId = data[i]['senderId'];
				var senderName = data[i]['senderName'];
				var senderAvatar = data[i]['senderAvatar'];
				var body = data[i]['body'];
				var sent_time = data[i]['sent_time'];
				var x = "";
				var y = "";
				if (senderId==<?php echo $id;?>) {
					x = " pull-right";
					y = " background-color:#C5DDDE;";
				} else {
					y = " background-color:#F0E5B9;";
				}
				ret = ret + "<div class=\"row-fluid span12 thumbnail\" style=\"margin-left:0px\" id=\"thread_detail\">";
				ret = ret + "<div class=\"span2" + x + "\">";
				ret = ret + "<div class=\"thumbnail ava\">";
				if(senderAvatar!=null && senderAvatar!=""){
					ret = ret + "<img src=\"<?php echo base_url() ?>avatar/thumb/"+senderAvatar+"\" data-src=\"http://localhost/ojexcom/assets/js/holder.js/160x120\" onerror=\"this.src='<?php echo base_url();?>assets/img/person.jpg'\">";
				} else {
					ret = ret + "<img src=\"http://localhost/ojexcom/assets/img/person.jpg\" data-src=\"http://localhost/ojexcom/assets/js/holder.js/160x120\">";
				}
				//ret = ret + "<img src=\"http://localhost/ojexcom/assets/img/person.jpg\" data-src=\"http://localhost/ojexcom/assets/js/holder.js/160x120\">";
				ret = ret + "</div></div>";
				ret = ret + "<div class=\"span10" + x + "\">";
				ret = ret + "<strong>" + senderName + "</strong><br/>";
				ret = ret + "<textarea readonly style=\"resize:none;color:black;"+ y +"\" disabled=\"disabled\">" + body + "</textarea>" + sent_time;
				ret = ret + "</div></div>";
			}
//			ret = ret + "<div class=\"row-fluid span12\" style=\"margin-left:0px\">";
	//		ret = ret + "<div class=\"span9\">";
		//	ret = ret + "<textarea rows=\"3\" id=\"reply\"></textarea></div>";
			//ret = ret + "<button class=\"btn btn-warning\" id=\"kirim\">KIRIM</button></div>";
			return ret;
		}
		function loadMessage(user_id) {
			$.ajax({
			   url:"http://localhost/ojexcom/index.php/pesan/load/"+user_id,
			   dataType:"json",
			   beforeSend:function(){
			   },
			   success:function(result) {
				   var data = result['message'];
				   var count = result['count'];
				   if (count==0) {
				   } else {
					   var htmlVal = generateThread(data);
					   $("#thread").html(htmlVal);
				   }
			   }
			});
		}
    </script>
	<div class="container">
		<div class="span10 offset1" style="margin-top:20px" id="wrap">
            <strong>PESAN</strong><br/>
		</div>
    <div class="container-fluid">
		<div class="row-fluid">
			<script type="text/javascript">
			// var objDiv = document.getElementById("thread");
			// objDiv.scrollTop = objDiv.scrollHeight;
			</script>
			<div class="span4" style="height:400px;overflow:scroll;background-color:white;">
			<!--Sidebar content-->
			<?php if($data['message'] != ""){ ?>
				<?php for($count=0; $count<sizeof($data['message']); $count++) { ?>
				<div class="inbox row-fluid span12 thumbnail" style="margin-left:0px;cursor:pointer;" id="<?php echo $data['message'][$count]['senderId'];?>" name="<?php echo $data['message'][$count]['senderName'];?>">
					
					<div class="span2">
						<div class="thumbnail ava">
							<?php 
							$url = "";
							if($data['message'][$count]['senderAvatar']!=""){
								$url = base_url().'avatar/thumb/'.$data['message'][$count]['senderAvatar'];
							} else {
								$url = base_url().'assets/img/person.jpg';
							}
							?>	
							<img class="" src="<?php echo $url; ?>"
							data-src="http://localhost/ojexcom/assets/js/holder.js/160x120" onerror="this.src='<?php echo base_url(); ?>assets/img/person.jpg'">
						</div>
					</div>
					<div class="span6">
						<strong><?php echo $data['message'][$count]['senderName'];?></strong>
						<br/>
						<?php echo $data['message'][$count]['sent_time']; ?>
					</div>
				</div>
				<?php } ?>
				<?php } else {echo 'belum ada pesan masuk.'; } ?>
			</div>
			<div class="span6">
			<!--Body content-->
				<div id="nama">
					<?php if(isset($data['sender'])){?>
					<h4><?php echo $data['sender']['name']; ?></h4>
					
					<input type="hidden" id="senderId" value="<?php echo $data['sender']['id']; ?>"/>
					<?php } ?>
				</div>				
				<div id="thread" style="height:400px; overflow:scroll;background-color:white">
					<?php if($data['detail_message'] != ""){ ?>
					<?php for ($i=0; $i < sizeof($data['detail_message']) ; $i++) { ?>								
					<div class="row-fluid span12 thumbnail" style="margin-left:0px" id="thread_detail">
					<?php
					$x = "";
					$y = "";
					if($data['detail_message'][$i]['senderId'] == $id){
						$x = " pull-right";
						$y = " background-color:#C5DDDE;";
					} else {
						$y = " background-color:#F0E5B9;";
					}
					 ?>
					<div class="span2 <?php echo $x; ?>">
					<div class="thumbnail ava">
					<!-- if(senderAvatar!=null && senderAvatar!=""){ -->
					<?php if($data['detail_message'][$i]['senderAvatar']!= null && $data['detail_message'][$i]['senderAvatar']!= ""){ ?>
						<img src="<?php echo base_url() ?>avatar/thumb/<?php echo $data['detail_message'][$i]['senderAvatar']; ?>" data-src="http://localhost/ojexcom/assets/js/holder.js/160x120" onerror="this.src='<?php echo base_url(); ?>assets/img/person.jpg'">
					<!-- } else { -->
					<?php } else { ?>
						<img src="http://localhost/ojexcom/assets/img/person.jpg" data-src="http://localhost/ojexcom/assets/js/holder.js/160x120">
					<!-- } -->
					<?php } ?>
					<!-- <img src="http://localhost/ojexcom/assets/img/person.jpg" data-src="http://localhost/ojexcom/assets/js/holder.js/160x120"> -->
					</div></div>
					<div class="span10 <?php echo $x; ?>">
					<strong><?php echo $data['detail_message'][$i]['senderName']; ?></strong><br/>
					<textarea readonly style="resize:none;color:black;<?php echo $y; ?>" disabled="disabled"><?php echo $data['detail_message'][$i]['body']; ?></textarea><?php echo $data['detail_message'][$i]['sent_time']; ?>
					</div>
					</div>
					<?php }} ?>
				</div>
				<div class="row-fluid span12" style="margin-left:0px" id="reply-form" style="visible:none">
					<div class="span9">
						<textarea rows="3" id="reply" placeholder="Tulis balasan..."></textarea>
					</div>
					<button class="btn btn-warning" id="kirim">KIRIM</button>
				</div>
				<br/>
			</div>
		</div>
    </div>
	</div>
</div>
